<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/11/25 0025
  Time: 上午 11:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>字典添加</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/home.css">
    <link rel="stylesheet" href="/static/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <style>
        .myLabel {
            font-size: larger;
        }

        .box-padding-15 {
            padding: 15px;
        }

        .searchButton {
            background-color: #009688;
            color: white;
            font-family: Aparajita;
            font-size: larger;
            font-weight: bolder;
            border-radius: 4px;
            letter-spacing: 5px;
        }
    </style>
</head>
<body>
<div class="box-padding-15">
    <form class="layui-form" method="get" action="javascript:;">
        <div class="layui-inline">
            <label class="layui-form-label myLabel" style="!important;width: auto;">字典名称:</label>
            <div class="layui-input-inline">
                <input  class="layui-input title" id="search"  onkeyup="AutoMatch(this)" placeholder="请输入">
            </div>
        </div>
        <button type="submit" class="layui-btn layui-btn-primary searchButton" lay-submit lay-filter="formSearch">
            查询
        </button>
    </form>
    <div class="layui-row">
        <div class="layui-col-sm3">
            <div class="grid-demo grid-demo-bg1">
                <%--权限树--%>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <input type="hidden" name="id" id="id">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>

        </div>
      <%--tab分页--%>
        <div class="layui-col-sm7">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li id="add_btn" class="layui-this">添加</li>
                <li id="edit_btn">修改</li>
            </ul>
            <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="box-form">
                            <form class="layui-form "  method="post">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">父类名称：</label>
                                    <div class="layui-input-block">
                                        <input type="hidden" name="fId" id="fId" value="${sysDict.fId}" required  autocomplete="off" class="layui-input">
                                        <input type="text"  id="parent" name="parentname" onkeyup="AutoMatch(this)" lay-verify="required|parentname"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">类别名称：</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="name" id="name" required  lay-verify="required"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">类别代码：</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="code" id="code" required  lay-verify="required"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formSubmit" id="submit">保存</button>
                                        <a href="/sysDict"><button type="button" class="layui-btn layui-btn-primary">取消</button></a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="box-form">
                            <form class="layui-form "  method="post">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">父类名称：</label>
                                    <div class="layui-input-block">
                                        <input type="hidden" value="${sysDict.id}" name="fId" required  autocomplete="off" class="layui-input">
                                        <input type="text" id="parent1" name="parentname"  required  lay-verify="required|parentname"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">类别名称：</label>
                                    <div class="layui-input-block">
                                        <input type="text" value="${sysDict.name}" name="name" id="name_" required  lay-verify="required"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">类别代码：</label>
                                    <div class="layui-input-block">
                                        <input type="text" value="${sysDict.code}" name="code" id="code_" required  lay-verify="required"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formSubmit" id="submit_">保存</button>
                                        <a href="/sysDict"><button type="button" class="layui-btn layui-btn-primary">取消</button></a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
    </div>
</div>

<script src="/static/plugins/jquery-3.2.1.min.js"></script>
<script src="/static/plugins/layui/layui.js"></script>
<script src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/plugins/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/static/plugins/ztree/js/jquery.ztree.excheck.js"></script>
<script>
    //加载模块
    layui.use(["form","element","layer"],function () {
        var form = layui.form;
        var element=layui.element;
        var layer=layui.layer;
        var setting = {
            check: {
                enable: false    //勾选框是否选中
            },
            data: {
                simpleData: {
                    enable: true   //是否折叠
                }
            },
            callback: {
                onClick: onClick
            },
            view: {
                selectedMulti: false //是否允许多选
            },
        };
        //点击某个节点 然后将该节点的名称赋值值文本框
        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            //获得选中的节点
            var nodes = zTree.getSelectedNodes(),
                v = "";
            //根据id排序
            nodes.sort(function compare(a, b) { return a.id - b.id; });
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].name + ",";
            }
            //将选中节点的名称显示在文本框内
            if (v.length > 0) v = v.substring(0, v.length - 1);
            var parent = $("#parent");
            parent.attr("value", v);
            var parent1 = $("#parent1");
            parent1.attr("value", v);
            //隐藏zTree
          /*  hideMenu();
            return false;*/
        }
        ///根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
        function AutoMatch(txtObj) {
            if (txtObj.value.length > 0) {
                InitialZtree();
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
                //将找到的nodelist节点更新至Ztree内
                $.fn.zTree.init($("#treeDemo"), setting, nodeList);
                showMenu();
            } else {
                //隐藏树
                hideMenu();
                InitialZtree();
            }
        }
        //异步加载权限树
            $.ajax({
                url: "/sysDict/tree",
                type: "get",
                dataType: "json",
                success: function (msg) {
                    if (msg.code == 1) {
                        var treeNodes = msg.data;
                        $.fn.zTree.init($("#treeDemo"), setting, treeNodes);//初始化树
                    } else {
                        console.log("树节点加载失败")
                    }
                },
                error: function () {
                    console.log("树节点加载错误")
                }
            });

        var id;
        function zTreeOnClick(event, treeId, treeNode) {
            id=treeNode.id;
            $("#parent").val(treeNode.name)//添加的父类
            $.ajax({
                url:"/sysDict/edit",
                type:"get",
                dataType:"json",
                data:{id:id},
                success:function (msg) {
                    var data = msg.data;
                    var data1 = msg.data1;
                    if (data1==null){
                        layer.msg("该项不能修改！")
                    }else{
                        $("#parentname").val(data1.name)
                        $("#name").val(data.name)
                        $("#code").val(data.code)
                    }
                },
                error:function () {
                    layer.msg("服务器忙！请稍后再试！")
                }
            })
        };
        $("#btn_edit").click(function () {
            if (null == id){
                layer.msg("请选择一条数据")
            }
        })
        //表单校验
        form.verify({
            parentname:function(value, item){ //value：表单的值、item：表单的DOM对象
                var vname=false;
                $.ajax({
                    url:"/sysDict/parent",
                    dataType:"json",
                    data:{name:value},
                    type:"get",
                    async:false,//默认是异步，设为同步，表明返回的数据在ajax之后执行
                    success:function (msg) {
                        var data = msg.data;
                        if (msg.code==1){
                            $("input[name=fId]").val(data.id)
                            vname=true;
                        }
                    },
                    error:function () {
                        console.log("服务器忙！")
                    }
                })
                if (!vname){
                    return "该父级名称不存在或错误";
                }
            }
        })

        //监听提交
            form.on('submit(formSubmit)', function (data) {
                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");  //获取树对象
                /*var nodes = treeObj.getCheckedNodes(true);  //获取树的选中节点
                var idArr = [];
                $.each(nodes, function (i, item) {
                    idArr.push(item.id);
                });*/
                return true;
            });
        //异步保存
        form.on("submit",function(data){
            $.ajax({
                url:"/sysDict/save",
                type:"post",
                dataType:"json",
                data:data.field,
                success:function (rs) {
                    layer.msg(rs.message);
                    if(rs.code==1){
                        layer.msg("保存成功",{time:2000},function(){
                            location.href="/sysDict";
                        })
                    }else{
                        layer.msg("保存失败");
                    }
                },
                error:function(){
                }
            })
            return false;   //阻止默认事件
        })
        //异步修改
        form.on('submit_',function(data1){
            $.ajax({
                url:"/sysyDict/update",
                type:"post",
                dataType:"json",
                data:data1.field,
                success:function(rs){
                    layer.msg(rs.message);
                    if(code==1){
                        layer.msg("修改成功",{time:2000},function(){
                            location.href="/sysDict";
                        })
                    }else{
                        layer.msg("修改失败");
                    }
                },
                error:function () {

                }
            })
            return false;   //阻止默认事件
        })

        });

</script>
</body>
</html>
